{% extends "base.html" %}
{% set home_page = "homepage" %}
{% block slider %}
<!-- Slider -->
<section id="slider-animated">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="flexslider" class="flexslider">
                    <ul class="slides">
                        <!-- slide 1 -->
                        <li id="slide-1">
                            <div class="inner">
                                <h1>You are awesome!</h1>
                                <p>Sign up and well contact you at your earliest convenience.</p>
                                <form action="#" class="hidden-mobile">
                                    <input type="text" placeholder="Type your email...">
                                    <input type="text" class="half" placeholder="Type your name...">
                                    <input type="text" class="half pull-right" placeholder="Type your last name...">
                                    <input type="submit" class="more-large" value="Sign up now">
                                </form>
                                <p>Access applications that are suitable for both of your business operations and personal activities at a discounted rate. </p>
                            </div>
                        </li>
                        <!-- slide 2 -->
                        <li id="slide-2">
                            <div class="inner">
                                <img src="/static/img/airtime_gal.png" alt="Airtime Kenya" class="image1 hidden-mobile">
                                <img src="/static/img/airtime_icon.png" alt="All Airtime Kenya" class="image2 hidden-mobile">
                                <h1>Airtime Applications</h1>
                                <p>Be it your personal computer, tablet,smart phone or your mobile device use our state of the art
                                    airtime app to get connected to your loved ones.
                                </p>
                                <a href="#" class="more">Subscribe  Now!</a>
                            </div>
                        </li>
                        <!-- slide 3 -->
                        <li id="slide-3">
                            <div class="inner">
                                <img src="/static/img/ipad.png" alt="Ipad" class="image1 hidden-phone">
                                <img src="/static/img/iphone.png" alt="Iphone" class="image2 hidden-phone">
                                <h1>QSI-Trackit, amazing!</h1>
                                <p class="hidden-mobile">description
                                    <br>description continue
                                </p>
                                <ul>
                                    <li>feature</li>
                                    <li>feature</li>
                                    <li>feature</li>
                                    <li>feature</li>
                                    <li class="hidden-phone">feature</li>
                                    <li class="hidden-phone">feature</li>
                                    <li class="hidden-phone">feature</li>
                                    <li>Have fun on it&hellip;</li>
                                </ul>
                                <a href="#" class="more-large">Subscribe Now!</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- #slider-animated -->
{% endblock %}
{% block page_head %}
<!-- Page Head -->
<section class="brake-line" id="page-head">
    <div class="inner">
        <div class="container">
            <div class="row">
                <div class="span9">
                    <hgroup>
                        <h1>Perfect Solutions for Your Business &amp; Work</h1>
                        Enquire about our services or products that suits your needs, or for just a quotation.
                    </hgroup>
                </div>
                <div class="span3">
                    <a href="#" class="more-large pull-right">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- #page-head -->
{% endblock %}
{% block content %}
<!-- Main Content -->
<div class="container">
    <div class="row">
        <section id="homepage-widget-area-1">
            <div class="widget span4 widget_teaser text-center">
                <img src="/static/img/i-big-1.png" alt="">
                <h2 class="widget-title">Online Banking</h2>
                <p>Lorem ipsum dolor sit amet consectetuer
                    <br>aliquet Morbi nec In Vivamus. Curabitur Lorem
                    id laoreet nisl lorem in pellentesque pellentesque amet eget.
                </p>
                <a href="#" class="more">Read More</a>
            </div>
            <div class="widget span4 widget_teaser text-center">
                <img src="/static/img/i-big-2.png" alt="">
                <h2 class="widget-title">Employment Skills</h2>
                <p>Lorem ipsum dolor sit amet consectetuer
                    <br>aliquet Morbi nec In Vivamus. Curabitur Lorem id laoreet
                    nisl lorem in pellentesque pellentesque amet eget.
                </p>
                <a href="#" class="more">Read More</a>
            </div>
            <div class="widget span4 widget_teaser text-center">
                <img src="/static/img/i-big-3.png" alt="">
                <h2 class="widget-title">Finance & Grants</h2>
                <p>Lorem ipsum dolor sit amet consectetuer
                    <br>aliquet Morbi nec In Vivamus. Curabitur Lorem id laoreet nisl lorem in pellentesque pellentesque amet eget.
                </p>
                <a href="#" class="more">Read More</a>
            </div>
        </section>
    </div>
</div>
<!-- #content -->
{% endblock %}
{% block social_profiles_inner %}
<!-- Social Profiles -->
<section class="brake-line" id="social-profiles">
    <div class="inner">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <ul class="pull-right">
                        <li id="i-facebook">
                            <a href="#">
                                <span></span>
                                <strong class="hidden-phone"> Facebook</strong>
                            </a>
                        </li>
                        <li id="i-dribbble">
                            <a href="#">
                                <span></span>
                                <strong class="hidden-phone"> Dribbble</strong>
                            </a>
                        </li>
                        <li id="i-google">
                            <a href="#">
                                <span></span>
                                <strong class="hidden-phone"> Google+</strong>
                            </a>
                        </li>
                        <li id="i-linkedin">
                            <a href="#">
                                <span></span>
                                <strong class="hidden-phone"> LinkedIn</strong>
                            </a>
                        </li>
                    </ul>
                    <div class="pull-left visible-desktop">
                        Stay connected with us in your favorite flavor!
                    </div>

                </div>

            </div>

        </div>

    </div>
</section>
<!-- #social-profiles -->
{% endblock %}
{% block footer_inner %}
<div class="inner">
    <div class="container">
        <div class="row">
            <!--                         widget-->
            <div class="span3 widget widget_text">
                <h3 class="widget-title">About QSI</h3>
                <p>Short description</p>
            </div>
            <!--                         widget-->
            <div class="span3 widget widget_recent_posts">
                <h3 class="widget-title">Latest From The Blog</h3>
                <dl>
                    <dt>
                        <a href="#">
                            <img src="/static/img/blog-post-thumb.png" alt="">
                        </a>
                    </dt>
                    <dd> works started on the follwing date
                        <a href="#">1 August 2013</a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <a href="#"><img src="/static/img/blog-post-thumb.png" alt=""></a>
                    </dt>
                    <dd> works started on the follwing date
                        <a href="#">1 August 2013</a>
                    </dd>
                </dl>
            </div>
            <!--                         widget-->
            <div class="span3 widget widget_twitter">
                <h3 class="widget-title">Last Tweets</h3>
                <div>

                </div>

            </div>
            <!--                         widget-->
            <div class="span3 widget widget_flickr">
                <h3 class="widget-title">Flickr Widget</h3>
                <div>
                    <!--                                <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user={{flicker_user_id}}"></script>-->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}